<template>
    <div>
        <el-card>
            <el-form :rules="intoFormRules" :model="intoForm" ref="intoFormRef" label-width="200px">
                <el-form-item label="商户名称：">
                    <span>{{intoForm.MerchantName}}</span>
                </el-form-item>
                <el-form-item label="商户简称：">
                    <span>{{intoForm.MerchantShortName}}</span>
                </el-form-item>
                <el-form-item label="小票抬头：" prop="ReceiptName">
                    <el-input v-model="intoForm.ReceiptName"></el-input>
                </el-form-item>
                <el-form-item label="商户类型：" prop="MerchantType">
                    <el-radio-group v-model="intoForm.MerchantType">
                        <el-radio label="0">企业</el-radio>
                        <el-radio label="1">自然人</el-radio>
                        <el-radio label="2">个体商户</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商户性质：" prop="MerchantProperty">
                    <el-radio-group v-model="intoForm.MerchantProperty">
                        <el-radio label="1">普通商户</el-radio>
                        <el-radio label="2">小微商户</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系人姓名：" prop="ContactPersonal">
                    <el-input v-model="intoForm.ContactPersonal"></el-input>
                </el-form-item>
                <el-form-item label="联系人手机号：" prop="ContactTelephone">
                    <el-input v-model="intoForm.ContactTelephone"></el-input>
                </el-form-item>
                <!-- <el-form-item label="省份代码：">
                    <el-input v-model="intoForm.Province"></el-input>
                </el-form-item>
                <el-form-item label="市代码：">
                    <el-input v-model="intoForm.City"></el-input>
                </el-form-item>
                <el-form-item label="区县代码：">
                    <el-input v-model="intoForm.County"></el-input>
                </el-form-item> -->
                <el-form-item label="区县编码：" prop="regionCode">
                    <el-cascader ref="myCascader" :show-all-levels="true" v-model="intoForm.regionCode" :options="regionList" placeholder="请选择" :props="props"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址：" prop="Address">
                    <el-input v-model="intoForm.Address"></el-input>
                </el-form-item>
                <el-form-item label="装机地址：" prop="InstallAddress">
                    <el-input v-model="intoForm.InstallAddress"></el-input>
                </el-form-item>
                <el-form-item label="证件类型：" prop="CertificateType">
                    <el-radio-group v-model="intoForm.CertificateType">
                        <el-radio label="01">身份证</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="法人姓名：" prop="LegalStand">
                    <el-input v-model="intoForm.LegalStand"></el-input>
                </el-form-item>
                <el-form-item label="法人证件号码：" prop="CertificateNumber">
                    <el-input v-model="intoForm.CertificateNumber"></el-input>
                </el-form-item>
                <el-form-item label="营业执照号：" prop="BusinessLicenseNumber">
                    <el-input v-model="intoForm.BusinessLicenseNumber"></el-input>
                </el-form-item>
                <el-form-item label="银行账号：" prop="BankAccount">
                    <el-input v-model="intoForm.BankAccount"></el-input>
                </el-form-item>
                <el-form-item label="账户类型：" prop="AccountType">
                    <el-radio-group v-model="intoForm.AccountType">
                        <el-radio label="0">对公</el-radio>
                        <el-radio label="1">法人</el-radio>
                        <el-radio label="2">股东</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="账户名称：" prop="AccountName">
                    <el-input v-model="intoForm.AccountName"></el-input>
                </el-form-item>
                <el-form-item label="开户银行代码：" prop="OpenAccountBank">
                    <el-select v-model="intoForm.OpenAccountBank" placeholder="请选择" :popper-append-to-body="false">
                        <el-option v-for="(item,i) in bankList" :key="i" :label="item.bankName" :value="item.bankCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联行号：" prop="BankLineNumber">
                    <el-input v-model="intoForm.BankLineNumber"></el-input>
                </el-form-item>
                <el-form-item label="经营类别：" prop="ProsecutionCategoryCode">
                    <el-select v-model="intoForm.ProsecutionCategoryCode" placeholder="请选择" :popper-append-to-body="false">
                        <el-option v-for="item in busTypeList" :key="item.code" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业类型：" prop="VocationTypeCode">
                    <el-select v-model="intoForm.VocationTypeCode" placeholder="请选择" :popper-append-to-body="false">
                        <el-option v-for="item in indTypeList" :key="item.code" :label="item.label" :value="item.value+''"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Mcc：" prop="Mcc">
                    <el-select v-model="intoForm.Mcc" placeholder="请选择" :popper-append-to-body="false">
                        <el-option v-for="item in MccList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系邮箱：" prop="Email">
                    <el-input v-model="intoForm.Email"></el-input>
                </el-form-item>
                <el-form-item label="结算人身份证号：" prop="SettlePersonalIDCardNumber">
                    <el-input v-model="intoForm.SettlePersonalIDCardNumber"></el-input>
                </el-form-item>
                <el-form-item label="结算人联系方式：" prop="SettlePersonalContactMode">
                    <el-input v-model="intoForm.SettlePersonalContactMode"></el-input>
                </el-form-item>
                <el-form-item label="法人证件开始时间：" prop="LegalCertificateBeginTime">
                    <el-input v-model="intoForm.LegalCertificateBeginTime"></el-input>
                </el-form-item>
                <el-form-item label="法人证件到期时间：" prop="LegalCertificateExpireTime">
                    <el-input v-model="intoForm.LegalCertificateExpireTime"></el-input>
                </el-form-item>
                <el-form-item label="结算人证件开始时间：" prop="SettlePersonalIDCardBeginTime">
                    <el-input v-model="intoForm.SettlePersonalIDCardBeginTime"></el-input>
                </el-form-item>
                <el-form-item label="结算人证件到期时间：" prop="SettlePersonalIDCardExpireTime">
                    <el-input v-model="intoForm.SettlePersonalIDCardExpireTime"></el-input>
                </el-form-item>
                <el-form-item label="营业执照开始时间：" prop="BusinessLicenseBeginTime">
                    <el-input v-model="intoForm.BusinessLicenseBeginTime"></el-input>
                </el-form-item>
                <el-form-item label="营业执照结束时间：" prop="BusinessLicenseExpireTime">
                    <el-input v-model="intoForm.BusinessLicenseExpireTime"></el-input>
                </el-form-item>
                <el-form-item label="产品费率(千分比【‰】)" prop="FeePercent">
                    <el-input v-model="intoForm.FeePercent"></el-input>
                </el-form-item>
                <el-form-item label="产品封顶费率" prop="FeeTop">
                    <el-input v-model="intoForm.FeeTop"></el-input>
                </el-form-item>
                <el-form-item label="产品手续费" prop="ProductHandlingCharge">
                    <el-input v-model="intoForm.ProductHandlingCharge"></el-input>
                </el-form-item>
                <el-form-item label="营业执照：" v-if="intoForm.file.business_license">
                    <el-image class="img-style" :src="intoForm.file.business_license"></el-image>
                </el-form-item>
                <el-form-item label="税务登记证：" v-if="intoForm.file.business_license">
                    <el-image class="img-style" :src="intoForm.file.business_license"></el-image>
                </el-form-item>
                <el-form-item label="组织机构证：" v-if="intoForm.file.business_license">
                    <el-image class="img-style" :src="intoForm.file.business_license"></el-image>
                </el-form-item>
                <el-form-item label="法人身份证正面：" v-if="intoForm.file.front_card">
                    <el-image class="img-style" :src="intoForm.file.front_card"></el-image>
                </el-form-item>
                <el-form-item label="法人身份证反面：" v-if="intoForm.file.back_card">
                    <el-image class="img-style" :src="intoForm.file.back_card"></el-image>
                </el-form-item>
                <el-form-item label="商户协议：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img15" :data="imgData.img15">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商户信息调查表：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img16" :data="imgData.img16">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="授权书：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img17" :data="imgData.img17">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="开户许可证：" v-if="intoForm.file.opening_account">
                    <el-image class="img-style" :src="intoForm.file.opening_account"></el-image>
                </el-form-item>
                <el-form-item label="银行卡正面：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img19" :data="imgData.img19">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="银行卡反面：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img20" :data="imgData.img20">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="结算人身份证正面：" v-if="intoForm.file.front_settlement_card">
                    <el-image class="img-style" :src="intoForm.file.front_settlement_card"></el-image>
                </el-form-item>
                <el-form-item label="结算人身份证反面：" v-if="intoForm.file.back_settlement_card">
                    <el-image class="img-style" :src="intoForm.file.back_settlement_card"></el-image>
                </el-form-item>
                <el-form-item label="手持身份证照：" v-if="intoForm.file.handheld_card">
                    <el-image class="img-style" :src="intoForm.file.handheld_card"></el-image>
                </el-form-item>
                <el-form-item label="手持银行卡照：" v-if="intoForm.file.handheld_bank">
                    <el-image class="img-style" :src="intoForm.file.handheld_bank"></el-image>
                </el-form-item>
                <el-form-item label="门头照：" v-if="intoForm.file.sign_doard">
                    <el-image class="img-style" :src="intoForm.file.sign_doard"></el-image>
                </el-form-item>
                <el-form-item label="场景照：" v-if="intoForm.file.interior_photo">
                    <el-image class="img-style" :src="intoForm.file.interior_photo"></el-image>
                </el-form-item>
                <el-form-item label="收银台照：">
                    <el-upload ref="imgUpload" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" :limit="1" list-type="picture" style="width:20%" :on-success="imgUploadSuccess" :file-list="echoList.img28" :data="imgData.img28">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirmSubmit(intoForm)">确定</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newId: 0,
            type: 3,
            tabsActive: '',
            intoForm: {
                file: {}
            },
            imgData: {
                img15: { name: 'img15' },
                img16: { name: 'img16' },
                img17: { name: 'img17' },
                img19: { name: 'img19' },
                img20: { name: 'img20' },
                img28: { name: 'img28' },
                img99: { name: 'img99' }
            },
            echoList: {
                img15: [],
                img16: [],
                img17: [],
                img19: [],
                img20: [],
                img28: [],
                img99: []
            },
            props: {
                emitPath: true,
                value: 'code',
                label: 'name',
                children: 'children'
            },
            // 经营类型选择
            busTypeList: [],
            // 行业类型选择
            indTypeList: [],
            // Mcc列表
            MccList: [],
            // 银行代码列表
            bankList: [],
            // 区县类型编码
            regionList: [],
            intoFormRules: {
                ReceiptName: [
                    { required: true, message: '请输入小票抬头', trigger: 'blur' }
                ],
                MerchantType: [
                    { required: true, message: '请选择商户类型', trigger: 'change' }
                ],
                MerchantProperty: [
                    { required: true, message: '请选择商户性质', trigger: 'change' }
                ],
                ContactPersonal: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
                ],
                ContactTelephone: [
                    { required: true, message: '请输入联系人手机', trigger: 'blur' }
                ],
                regionCode: [
                    { required: true, message: '请选择区县编码', trigger: 'change' }
                ],
                Address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
                InstallAddress: [
                    { required: true, message: '请输入装机地址', trigger: 'blur' }
                ],
                CertificateType: [
                    { required: true, message: '请输入证件类型', trigger: 'blur' }
                ],
                LegalStand: [
                    { required: true, message: '请输入法人姓名', trigger: 'blur' }
                ],
                CertificateNumber: [
                    { required: true, message: '请输入法人证件号码', trigger: 'blur' }
                ],
                BusinessLicenseNumber: [
                    { required: true, message: '请输入营业执照号', trigger: 'blur' }
                ],
                BankAccount: [
                    { required: true, message: '请输入银行账号', trigger: 'blur' }
                ],
                AccountType: [
                    { required: true, message: '请选择账户类型', trigger: 'change' }
                ],
                AccountName: [
                    { required: true, message: '请输入账户名称', trigger: 'blur' }
                ],
                OpenAccountBank:[
                    { required: true, message: '请输入开户银行代码', trigger: 'change' }
                ],
                BankLineNumber: [
                    { required: true, message: '请输入联行号', trigger: 'blur' }
                ],
                ProsecutionCategoryCode: [
                    { required: true, message: '请选择经营类别', trigger: 'change' }
                ],
                VocationTypeCode: [
                    { required: true, message: '请选择行业类型', trigger: 'change' }
                ],
                Mcc: [
                    { required: true, message: '请选择Mcc', trigger: 'change' }
                ],
                Email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
                SettlePersonalIDCardNumber: [
                    { required: true, message: '请输入结算人身份证号', trigger: 'blur' }
                ],
                SettlePersonalContactMode: [
                    { required: true, message: '请输入结算人联系方式', trigger: 'blur' }
                ],
                LegalCertificateBeginTime: [
                    { required: true, message: '请输入法人证件开始时间', trigger: 'blur' }
                ],
                LegalCertificateExpireTime: [
                    { required: true, message: '请输入法人证件到期时间', trigger: 'blur' }
                ],
                SettlePersonalIDCardBeginTime: [
                    { required: true, message: '请输入结算人证件开始时间', trigger: 'blur' }
                ],
                SettlePersonalIDCardExpireTime: [
                    { required: true, message: '请输入结算人证件到期时间', trigger: 'blur' }
                ],
                BusinessLicenseBeginTime: [
                    { required: true, message: '请输入营业执照开始时间', trigger: 'blur' }
                ],
                BusinessLicenseExpireTime: [
                    { required: true, message: '请输入营业执照结束时间', trigger: 'blur' }
                ],
                FeePercent: [
                    { required: true, message: '请输入产品费率', trigger: 'blur' }
                ],
                FeeTop: [
                    { required: true, message: '请输入产品封顶费率', trigger: 'blur' }
                ],
                ProductHandlingCharge: [
                    { required: true, message: '请输入产品手续费', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.newId = Number(this.$route.query.id);
        this.getBusTypeList();
        this.getIndTypeList();
        this.getMccList();
        this.getBankList();
        this.getRegionList();
        this.getIntoInfo();
    },
    methods: {
        confirmSubmit(form) {
            let _this = this;
            _this.$refs.intoFormRef.validate((valid) => {
                console.log(valid)
                if (valid) {
                    this.$axios({
                        url: '/admin/channel/channelInfo',
                        data: {
                            userID: _this.newId,
                            type: _this.type,
                            service_rate: form.FeePercent,
                            direct_data: form
                        },
                        success(res) {
                            if (res.data.code === 200) {
                                _this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                _this.getIntoInfo();
                            } else {
                                _this.$message.error(res.data.msg);
                            }
                        }
                    });
                }
            });
        },
        async getIntoInfo() {
            let _this = this;
            this.$axios({
                url: '/admin/channel/into',
                data: {
                    userID: _this.newId,
                    type: _this.type
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.intoForm = res.data.content;
                        _this.$nextTick(() => {
                            _this.$refs.intoFormRef.clearValidate();
                        });
                        _this.echoImg();
                    } else if (res.data.code == 0) {
                        _this.$message.error(res.data.msg);
                        _this.$router.go(-1);
                    } else {
                        _this.$message.error(res.data.msg);
                    }
                }
            });
        },
        // 回显图片
        echoImg() {
            let file = this.intoForm.file;
            file.img15 && this.echoList.img15.push({ url: file.img15 });
            file.img16 && this.echoList.img16.push({ url: file.img16 });
            file.img17 && this.echoList.img17.push({ url: file.img17 });
            file.img19 && this.echoList.img19.push({ url: file.img19 });
            file.img20 && this.echoList.img20.push({ url: file.img20 });
            file.img28 && this.echoList.img28.push({ url: file.img28 });
            file.img99 && this.echoList.img99.push({ url: file.img99 });
        },
        // 获取经营类型选项
        async getBusTypeList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getCategory',
                data: {
                    type: _this.type
                },
                success(res) {
                    console.log(res)
                    if (res.data.code === 200) {
                        _this.busTypeList = res.data.content;
                    }
                }
            });
        },
        // 获取行业类型选择
        async getIndTypeList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getIndustry',
                data: {
                    type: _this.type,
                },
                success(res) {
                    if (res.data.code === 200) {
                        _this.indTypeList = res.data.content;
                    }
                }
            });
        },
        // 获取Mcc列表
        async getMccList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getMcc',
                data: {
                    type: _this.type,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.MccList = res.data.content;
                    }
                }
            });
        },
        // 获取省市区编码
        async getRegionList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getArea',
                data: {
                    type: _this.type,
                    parent_code: 0
                },
                success(res) {
                    if (res.data.code === 200) {
                        _this.regionList = res.data.content;
                    }
                }
            });
        },
        async getBankList() {
            let _this = this;
            this.$axios({
                url: '/admin/conf/getBank',
                data: {
                    type: _this.type,
                },
                success(res) {
                    console.log(res)
                    if (res.data.code === 200) {
                        _this.bankList = res.data.content;
                    }
                }
            });
        },
        // 图片上传
        imgUploadSuccess(response, file, fileList) {
            let _this = this;
            if (response.code == 200) {
                _this.intoForm.file[response.content.name] = response.content.path;
                _this.$message({
                    type: 'success',
                    message: response.msg
                });
            } else {
                _this.$message.error(response.msg);
            }
        },
    },
    components: {},
};
</script>

<style scoped>
.el-card {
    height: 700px;
    overflow: auto;
}
.el-input {
    width: 300px !important;
}
.img-style {
    width: 200px;
    height: 100px;
}
</style>
